<template>
    <div>
      <p class="rec-text">REC:{{ formattedDateTime }}</p>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        currentTime: new Date(),
      };
    },
    computed: {
      formattedDateTime() {
        const year = this.currentTime.getFullYear();
        const month = this.padNumber(this.currentTime.getMonth() + 1);
        const day = this.padNumber(this.currentTime.getDate());
        const hours = this.padNumber(this.currentTime.getHours());
        const minutes = this.padNumber(this.currentTime.getMinutes());
        const seconds = this.padNumber(this.currentTime.getSeconds());
  
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      },
    },
    mounted() {
      this.startTimer();
    },
    methods: {
      startTimer() {
        this.timer = setInterval(() => {
          this.currentTime = new Date();
        }, 1000);
      },
      padNumber(number) {
        return number.toString().padStart(2, '0');
      },
    },
    beforeDestroy() {
      clearInterval(this.timer);
    },
  };
  </script>
  
  <style scoped>
  .rec-text {
    color: red;
  }
  /* Add your component styles here */
  </style>
  